<template>
  <div class="word-forum" :class="theme">
    <div class="admin-container">
      <!-- 顶部导航栏 -->
      <header class="admin-header">
        <div class="header-left">
          <h1>词汇关系管理</h1>
          <div class="word-info" v-if="currentWord">
            <span class="word-text">{{ currentWord.word }}</span>
            <span class="word-meaning">{{ currentWord.meaning }}</span>
          </div>
        </div>
        <div class="header-right">
          <button class="theme-toggle" @click="toggleTheme">
            <span v-if="theme === 'light'">🌙</span>
            <span v-else>☀️</span>
          </button>
          <span class="admin-name">管理员</span>
        </div>
      </header>

      <!-- 主要内容区 -->
      <div class="admin-content">
        <!-- 单词选择区域 -->
        <div class="word-selector-container">
          <div class="search-box">
            <input type="text" v-model="wordSearchQuery" placeholder="搜索单词..." @input="filterWords" />
            <button class="search-btn">
              <svg viewBox="0 0 24 24" width="18" height="18">
                <path fill="currentColor"
                  d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
              </svg>
            </button>
          </div>
          <select v-model="selectedWordId" @change="loadRelations">
            <option value="">选择单词...</option>
            <option v-for="word in filteredWords" :key="word.id" :value="word.id">
              {{ word.word }} - {{ word.meaning }}
            </option>
          </select>
        </div>

        <!-- 标签页导航 -->
        <div class="tabs">
          <button class="tab" :class="{ active: activeTab === 'synonyms' }" @click="activeTab = 'synonyms'">
            同义词
          </button>
          <button class="tab" :class="{ active: activeTab === 'antonyms' }" @click="activeTab = 'antonyms'">
            反义词
          </button>
        </div>

        <!-- 搜索过滤区域 -->
        <div class="relation-search" v-if="selectedWordId">
          <input type="text" v-model="relationSearchQuery"
            :placeholder="`搜索${activeTab === 'synonyms' ? '同义词' : '反义词'}...`" @input="applyRelationFilter" />
          <button class="clear-btn" @click="clearRelationFilter" v-if="relationSearchQuery">
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor"
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            </svg>
          </button>
        </div>

        <!-- 同义词管理 -->
        <div v-show="activeTab === 'synonyms'" class="relation-container">
          <div class="relation-header">
            <h3>同义词管理 ({{ filteredSynonyms.length }})</h3>
            <button class="add-btn" @click="openAddModal('synonym')">
              <svg viewBox="0 0 24 24" width="18" height="18">
                <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
              </svg>
              添加同义词
            </button>
          </div>

          <div class="relation-list" v-if="filteredSynonyms.length > 0">
            <div class="relation-item" v-for="(item, index) in filteredSynonyms" :key="item.id">
              <div class="relation-content">
                <div class="relation-pair" v-for="(pair, pairIndex) in item.synonym" :key="pairIndex">
                  <span class="relation-word">{{ pair.word }}</span>
                  <span class="relation-meaning">{{ pair.meaning }}</span>
                  <div class="relation-actions">
                    <button class="edit-btn" @click="editRelation('synonym', index, pairIndex)">
                      <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor"
                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
                      </svg>
                    </button>
                    <button class="delete-btn" @click="confirmDelete('synonym', index, pairIndex)">
                      <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor"
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="no-data" v-else>
            {{ relationSearchQuery ? '没有找到匹配的同义词' : selectedWordId ? '暂无同义词数据' : '请先选择单词' }}
          </div>
        </div>

        <!-- 反义词管理 -->
        <div v-show="activeTab === 'antonyms'" class="relation-container">
          <div class="relation-header">
            <h3>反义词管理 ({{ filteredAntonyms.length }})</h3>
            <button class="add-btn" @click="openAddModal('antonym')">
              <svg viewBox="0 0 24 24" width="18" height="18">
                <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
              </svg>
              添加反义词
            </button>
          </div>

          <div class="relation-list" v-if="filteredAntonyms.length > 0">
            <div class="relation-item" v-for="(item, index) in filteredAntonyms" :key="item.id">
              <div class="relation-content">
                <div class="relation-pair" v-for="(pair, pairIndex) in item.antonym" :key="pairIndex">
                  <span class="relation-word">{{ pair.word }}</span>
                  <span class="relation-meaning">{{ pair.meaning }}</span>
                  <div class="relation-actions">
                    <button class="edit-btn" @click="editRelation('antonym', index, pairIndex)">
                      <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor"
                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
                      </svg>
                    </button>
                    <button class="delete-btn" @click="confirmDelete('antonym', index, pairIndex)">
                      <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor"
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="no-data" v-else>
            {{ relationSearchQuery ? '没有找到匹配的反义词' : selectedWordId ? '暂无反义词数据' : '请先选择单词' }}
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑关系模态框 -->
    <div v-if="showRelationModal" class="modal-overlay" @click.self="showRelationModal = false">
      <div class="modal-content">
        <div class="modal-header">
          <h2>{{ isEditing ? '编辑' : '添加' }}{{ modalType === 'synonym' ? '同义词' : '反义词' }}</h2>
          <button class="close-btn" @click="showRelationModal = false">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor"
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>单词</label>
            <input type="text" v-model="currentRelation.word" placeholder="输入单词..." />
          </div>
          <div class="form-group">
            <label>释义</label>
            <input type="text" v-model="currentRelation.meaning" placeholder="输入释义..." />
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="showRelationModal = false">
            取消
          </button>
          <button class="confirm-btn" @click="saveRelation">
            {{ isEditing ? '保存更改' : '添加' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 删除确认模态框 -->
    <div v-if="showDeleteConfirm" class="modal-overlay">
      <div class="confirm-modal">
        <div class="confirm-header">
          <h3>确认删除</h3>
        </div>
        <div class="confirm-body">
          <p>确定要删除这个{{ deleteType === 'synonym' ? '同义词' : '反义词' }}吗？</p>
          <div class="relation-preview">
            <p>{{ relationToDelete.word }} - {{ relationToDelete.meaning }}</p>
          </div>
        </div>
        <div class="confirm-footer">
          <button class="cancel-btn" @click="showDeleteConfirm = false">
            取消
          </button>
          <button class="confirm-btn" @click="deleteRelation">
            确认删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue';
import { getWordsData, getAllSynonymsAntonymsApi, updateWordSynonymByIdApi, updateWordAntonymByIdApi } from '../../api/authService.js'

// 主题功能
const theme = inject("theme", ref('light'));
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};

// 数据状态 - 修改为新的数据结构
const words = ref([
  { id: 1, word: 'happy', meaning: '高兴的' },
  { id: 2, word: 'big', meaning: '大的' },
  { id: 3, word: 'fast', meaning: '快的' },
  { id: 4, word: 'light', meaning: '轻的' }
]);

const synonyms = ref([
  {
    id: 1,
    word_id: 1,
    synonym: [
      { word: 'joyful', meaning: '快乐的' },
      { word: 'cheerful', meaning: '愉快的' }
    ]
  },
  {
    id: 2,
    word_id: 2,
    synonym: [
      { word: 'large', meaning: '巨大的' },
      { word: 'huge', meaning: '庞大的' }
    ]
  }
]);

const antonyms = ref([
  {
    id: 1,
    word_id: 1,
    antonym: [
      { word: 'sad', meaning: '悲伤的' },
      { word: 'depressed', meaning: '沮丧的' }
    ]
  },
  {
    id: 2,
    word_id: 2,
    antonym: [
      { word: 'small', meaning: '小的' },
      { word: 'tiny', meaning: '微小的' }
    ]
  }
]);

// UI状态
const activeTab = ref('synonyms');
const selectedWordId = ref('');
const wordSearchQuery = ref('');
const relationSearchQuery = ref('');
const showRelationModal = ref(false);
const showDeleteConfirm = ref(false);
const isEditing = ref(false);
const modalType = ref('synonym');
const deleteType = ref('synonym');
const editIndex = ref(-1);
const editPairIndex = ref(-1);

// 当前编辑的关系
const currentRelation = ref({
  word: '',
  meaning: ''
});

// 要删除的关系
const relationToDelete = ref({
  word: '',
  meaning: ''
});

// 计算属性
const currentWord = computed(() => words.value.find(word => word.id === parseInt(selectedWordId.value)));

const filteredWords = computed(() => {
  if (!wordSearchQuery.value) return words.value;

  const query = wordSearchQuery.value.toLowerCase();

  return words.value.filter(word =>
    (word.word && word.word.toLowerCase().includes(query)) ||
    (word.meaning && word.meaning.toLowerCase().includes(query))
  );
});


const currentSynonyms = computed(() => {
  if (!selectedWordId.value) return [];
  return synonyms.value.filter(s => s.word_id === parseInt(selectedWordId.value));
});

const currentAntonyms = computed(() => {
  if (!selectedWordId.value) return [];
  return antonyms.value.filter(a => a.word_id === parseInt(selectedWordId.value));
});

const filteredSynonyms = computed(() => {
  if (!relationSearchQuery.value) return currentSynonyms.value;

  const query = relationSearchQuery.value.toLowerCase();

  return currentSynonyms.value
    .map(item => {
      const filteredPairs = item.synonym.filter(pair =>
        pair.word.toLowerCase().includes(query) ||
        pair.meaning.toLowerCase().includes(query)
      );

      return {
        ...item,
        synonym: filteredPairs
      };
    })
    .filter(item => item.synonym.length > 0);
});

const filteredAntonyms = computed(() => {
  if (!relationSearchQuery.value) return currentAntonyms.value;

  const query = relationSearchQuery.value.toLowerCase();

  return currentAntonyms.value
    .map(item => {
      const filteredPairs = item.antonym.filter(pair =>
        pair.word.toLowerCase().includes(query) ||
        pair.meaning.toLowerCase().includes(query)
      );

      return {
        ...item,
        antonym: filteredPairs
      };
    })
    .filter(item => item.antonym.length > 0);
});

// 方法
const filterWords = () => {
  // 搜索时自动执行
};

const loadRelations = () => {
  relationSearchQuery.value = ''; // 切换单词时清空搜索
};

const applyRelationFilter = () => {
  // 搜索时自动执行
};

const clearRelationFilter = () => {
  relationSearchQuery.value = '';
};

const openAddModal = (type) => {
  if (!selectedWordId.value) {
    alert('请先选择单词');
    return;
  }
  modalType.value = type;
  isEditing.value = false;
  currentRelation.value = { word: '', meaning: '' };
  showRelationModal.value = true;
};

const editRelation = (type, itemIndex, pairIndex) => {
  modalType.value = type;
  isEditing.value = true;
  editIndex.value = itemIndex;
  editPairIndex.value = pairIndex;

  const items = type === 'synonym' ? filteredSynonyms.value : filteredAntonyms.value;
  currentRelation.value = { ...items[itemIndex][type][pairIndex] };
  showRelationModal.value = true;
};

const saveRelation = () => {
  if (!currentRelation.value.word.trim()) {
    alert('单词不能为空');
    return;
  }

  if (modalType.value === 'synonym') {
    if (isEditing.value) {
      // 更新同义词
      const item = filteredSynonyms.value[editIndex.value];
      item.synonym[editPairIndex.value] = { ...currentRelation.value };

      const handAfterSynonymDataArr = filteredSynonyms.value[editIndex.value].synonym.map((item) => ({
        word: item.word,
        Translation: item.meaning
      }))
      updateWordSynonymById(filteredSynonyms.value[editIndex.value].id, handAfterSynonymDataArr)
      // console.log(handAfterSynonymDataArr);
    } else {
      // 添加新同义词
      const existing = synonyms.value.find(s => s.word_id === parseInt(selectedWordId.value));
      if (existing) {
        existing.synonym.push({ ...currentRelation.value });
      } else {
        const newId = Math.max(...synonyms.value.map(s => s.id), 0) + 1;
        synonyms.value.push({
          id: newId,
          word_id: parseInt(selectedWordId.value),
          synonym: [{ ...currentRelation.value }]
        });
      }
      const handAfterSynonymDataArr = existing.synonym.map((item) => ({
        word: item.word,
        Translation: item.meaning
      }))
      updateWordSynonymById(existing.id, handAfterSynonymDataArr)
      // console.log(handAfterSynonymDataArr);
    }
  } else {
    // 反义词处理逻辑
    if (isEditing.value) {
      const item = filteredAntonyms.value[editIndex.value];
      item.antonym[editPairIndex.value] = { ...currentRelation.value };


      const handAfterAntonymDataArr = filteredAntonyms.value[editIndex.value].antonym.map((item) => ({
        word: item.word,
        Translation: item.meaning
      }))
      // console.log();
      updateWordAntonymById(filteredAntonyms.value[editIndex.value].id, handAfterAntonymDataArr)
    } else {
      const existing = antonyms.value.find(a => a.word_id === parseInt(selectedWordId.value));
      if (existing) {
        existing.antonym.push({ ...currentRelation.value });
      } else {
        const newId = Math.max(...antonyms.value.map(a => a.id), 0) + 1;
        antonyms.value.push({
          id: newId,
          word_id: parseInt(selectedWordId.value),
          antonym: [{ ...currentRelation.value }]
        });
      }
      // console.log(existing);
      const handAfterAntonymsDataArr = existing.antonym.map((item) => ({
        word: item.word,
        Translation: item.meaning
      }))
      updateWordAntonymById(existing.id, handAfterAntonymsDataArr)
      // console.log(existing.id, handAfterAntonymsDataArr);
    }
  }

  showRelationModal.value = false;
};

const confirmDelete = (type, itemIndex, pairIndex) => {
  deleteType.value = type;
  editIndex.value = itemIndex;
  editPairIndex.value = pairIndex;

  const items = type === 'synonym' ? filteredSynonyms.value : filteredAntonyms.value;
  relationToDelete.value = { ...items[itemIndex][type][pairIndex] };
  console.log(items[0].synonym);
  showDeleteConfirm.value = true;
};

const updateWordSynonymById = async (synonymId, updatadData) => {
  try {
    const response = await updateWordSynonymByIdApi(synonymId, updatadData);
    if (response) {
      console.log(response);
    } else {
      console.log("Error");
    }
  } catch (error) {
    console.log(error);
  }
}
const updateWordAntonymById = async (synonymId, updatadData) => {
  try {
    const response = await updateWordAntonymByIdApi(synonymId, updatadData);
    if (response) {
      console.log(response);
    } else {
      console.log("Error");
    }
  } catch (error) {
    console.log(error);
  }
}


const deleteRelation = () => {
  if (deleteType.value === 'synonym') {
    // console.log(filteredSynonyms.value[editIndex.value].id,filteredSynonyms.value[editIndex.value].synonym);

    // console.log(filteredSynonyms.value[editIndex.value]);
    const item = filteredSynonyms.value[editIndex.value];
    item.synonym.splice(editPairIndex.value, 1);
    const handAfterSynonymDataArr = filteredSynonyms.value[editIndex.value].synonym.map((item) => ({
      word: item.word,
      Translation: item.meaning
    }))
    // console.log(handAfterSynonymDataArr);
    updateWordSynonymById(filteredSynonyms.value[editIndex.value].id, handAfterSynonymDataArr)
    // 如果没有同义词了，删除整个条目
    if (item.synonym.length === 0) {
      synonyms.value = synonyms.value.filter(s => s.id !== item.id);
    }
  } else {
    const item = filteredAntonyms.value[editIndex.value];
    item.antonym.splice(editPairIndex.value, 1);
    const handAfterAntonymDataArr = filteredAntonyms.value[editIndex.value].antonym.map((item) => ({
      word: item.word,
      Translation: item.meaning
    }))
    updateWordAntonymById(filteredAntonyms.value[editIndex.value].id, handAfterAntonymDataArr)
    // 如果没有反义词了，删除整个条目
    if (item.antonym.length === 0) {
      antonyms.value = antonyms.value.filter(a => a.id !== item.id);
    }
  }

  showDeleteConfirm.value = false;
};
const getWordDataIN = async () => {
  try {
    const response = await getWordsData();
    if (response.data) {

      // console.log(response.data);
      return response.data;
    } else {
      console.log("Error: ", response.data);
    }
  } catch (error) {
    console.log("Error: ", error);
  }
}
const handWordData = (wordData) => {
  const AfterData = wordData.map((item) => {
    return {
      id: item.id,
      word: item.word,
      meaning: item.definition
    };
  });
  return AfterData;
}

const handSynonymsAntonymsData = async (synonyms, antonyms) => {
  const AfterSynonyms = synonyms.map(item => ({
    id: item.id,
    word_id: item.word_id,
    synonym: item.synonym.map(a => ({
      word: a.word,
      meaning: a.Translation
    }))
  }));

  const AfterAntonyms = antonyms.map(item => ({
    id: item.id,
    word_id: item.word_id,
    antonym: item.antonym.map(a => ({
      word: a.word,
      meaning: a.Translation
    }))
  }));

  return {
    afterHandSynonymsData: AfterSynonyms,
    afterHandAntonymsData: AfterAntonyms
  };
};


const loadPageData = async () => {
  try {
    const [wordData, synonymsAntonyms] = await Promise.all([
      getWordDataIN(),
      getAllSynonymsAntonymsas()
    ])
    // console.log(wordData, 'wordData');
    words.value = handWordData(wordData);
    const { afterHandSynonymsData, afterHandAntonymsData } = await handSynonymsAntonymsData(
      synonymsAntonyms.synonyms,
      synonymsAntonyms.antonyms
    );
    synonyms.value = afterHandSynonymsData;
    antonyms.value = afterHandAntonymsData;
    // console.log(afterHandSynonymsData, 'afterHandSynonymsData');
    // console.log(afterHandAntonymsData, 'afterHandAntonymsData');
    // console.log(afterHandAntonymsData);
    // synonym.value = afterHandSynonymsAntonymsData
    // console.log(synonymsAntonyms, 'synonymsAntonyms');
    // console.log(words.value[0]);
  } catch (error) {
    console.error(error)
    ElMessage.error('请求数据失败')
  }
}

const getAllSynonymsAntonymsas = async () => {
  try {
    const response = await getAllSynonymsAntonymsApi();
    // console.log(response);
    if (response.success) {

      // console.log(response.data);
      return response
      // return response.data;
    } else {
      console.log("Error: ", response.data);
    }
  } catch (error) {
    console.log("Error: ", error);
  }
}


// 初始化
onMounted(() => {
  // 可以在这里加载初始数据
  loadPageData();
});
</script>

<style scoped>
.word-forum {
  --bg-color: #f8f9fa;
  --text-color: #333;
  --primary-color: #4361ee;
  --secondary-color: #6c757d;
  --border-color: #e1e4e8;
  --card-bg: #fff;
  --hover-bg: #f1f3f5;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --success-color: #28a745;
  --info-color: #17a2b8;
}

.word-forum.dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --primary-color: #4895ef;
  --secondary-color: #8e8e8e;
  --border-color: #333;
  --card-bg: #2d2d2d;
  --hover-bg: #383838;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.admin-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.header-left h1 {
  margin: 0;
  font-size: 24px;
  color: var(--primary-color);
}

.word-info {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.word-text {
  font-weight: bold;
  color: var(--primary-color);
}

.word-meaning {
  font-size: 14px;
  color: var(--secondary-color);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-color);
  padding: 5px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background-color: var(--hover-bg);
}

.admin-name {
  font-weight: 500;
}

.word-selector-container {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
}

.search-box {
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: 400px;
}

.search-box input {
  flex-grow: 1;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 4px 0 0 4px;
  background-color: var(--card-bg);
  color: var(--text-color);
}

.search-btn {
  padding: 10px 15px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  opacity: 0.9;
}

.word-selector-container select {
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  min-width: 200px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--secondary-color);
  font-weight: 500;
}

.tab:hover {
  color: var(--primary-color);
}

.tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.relation-search {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  position: relative;
}

.relation-search input {
  flex-grow: 1;
  padding: 10px 15px;
  padding-right: 35px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--card-bg);
  color: var(--text-color);
}

.clear-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--secondary-color);
  padding: 5px;
}

.clear-btn:hover {
  color: var(--text-color);
}

.relation-container {
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.relation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.relation-header h3 {
  margin: 0;
  color: var(--primary-color);
}

.add-btn {
  padding: 8px 15px;
  background-color: var(--success-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.add-btn:hover {
  opacity: 0.9;
}

.relation-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.relation-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px;
  background-color: var(--hover-bg);
  border-radius: 6px;
}

.relation-content {

  flex-grow: 1;
  /* display: flex;
  justify-content: space-between; */
}

.relation-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-color);
}

.relation-pair:last-child {
  border-bottom: none;
}

.relation-word {
  font-weight: 500;
  min-width: 120px;
}

.relation-meaning {
  color: var(--secondary-color);
  font-style: italic;
}

.relation-actions {
  display: flex;
  gap: 8px;
  padding-left: 15px;
  margin-left: auto;
}

.edit-btn,
.delete-btn {
  padding: 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.edit-btn {
  color: var(--warning-color);
}

.edit-btn:hover {
  background-color: rgba(255, 193, 7, 0.1);
}

.delete-btn {
  color: var(--danger-color);
}

.delete-btn:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

.no-data {
  text-align: center;
  padding: 20px;
  color: var(--secondary-color);
  font-style: italic;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: var(--card-bg);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--secondary-color);
  padding: 5px;
}

.close-btn:hover {
  color: var(--text-color);
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--card-bg);
  color: var(--text-color);
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn,
.confirm-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn {
  background-color: var(--secondary-color);
  color: white;
  border: none;
}

.confirm-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
}

.confirm-btn:hover {
  opacity: 0.9;
}

.confirm-modal {
  background-color: var(--card-bg);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: var(--shadow);
}

.confirm-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
}

.confirm-header h3 {
  margin: 0;
  font-size: 18px;
}

.confirm-body {
  padding: 20px;
}

.relation-preview {
  margin-top: 15px;
  padding: 15px;
  background-color: var(--hover-bg);
  border-radius: 4px;
}

.relation-preview p {
  margin: 5px 0;
}

.confirm-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .word-selector-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    max-width: 100%;
  }

  .word-selector-container select {
    width: 100%;
  }

  .modal-body {
    padding: 15px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .relation-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .relation-item {
    flex-direction: column;
    gap: 10px;
  }

  .relation-actions {
    padding-left: 0;
    justify-content: flex-end;
  }
}
</style>